import {Button,Form,Input,DatePicker,Table,Modal, message} from "antd"
import {EyeOutlined,PlusOutlined,DeleteOutlined,SearchOutlined,EditOutlined} from "@ant-design/icons"
import {useState,useEffect,ReactNode, Fragment} from "react"
import * as api from "@/api/product"
import { delProduct } from "@/api/product"
import MyModal from "@/components/myModal"
//声明表格数据的类型
type Idata={
    description:string;
    imageUrl:string;
    inventor:number;
    price:number;
    productName:string;
    product_id:string;
    updateTime:string;
    updator:string;
    category_id?:string;
    _id?:string;
}
//声明表格每一列的数据
type Icolumns={
    dataIndex:string;
    width?:string,
    title:string;
    key:string,
    render?:(value:any,record:Idata,index:number)=>ReactNode | any
}
const ProductList=()=>{
    //声明一个要记录要被删除的商品id状态
    let [delId,setDelId]=useState<string|undefined>()
    //控制普通modal显示和隐藏
    let [isModalOpen,setIsModalOpen]=useState<boolean>()
    //声明表格数据
    let [dataSource,setDataScource]=useState<Idata[]>([])
    //删除产品
    let handleDelete=(record:any)=>{
        // console.log(record)
        //弹窗
        setDelId(record.product_id)
        setIsModalOpen(true)
    }
    //声明列数据
    let columns:Icolumns[]=[
        {
            title:"产品图片",
            width:'80',
            dataIndex:'imageUrl',
            key:'imageUrl'
        },
        {
            title:"产品编号",
            dataIndex:'product_id',
            key:'product_id',
        },
        {
            title:"产品名称",
            dataIndex:'productName',
            key:'productName',
        },
        {
            title:"价格",
            dataIndex:'price',
            key:'price',
        },
        {
            title:"库存",
            dataIndex:'inventory',
            key:'inventory',
        },
        {
            title:"修改人",
            dataIndex:'updator',
           key:'updator',
        },
        {
            title:"修改时间",
            dataIndex:'updateTime',
            key:'updateTime',
        },
        {
            title:"操作",
            dataIndex:'action',
            render(_,record){
                return (
                    <Fragment>
                        <Button icon={<EyeOutlined/>}>查看</Button>
                        <Button icon={<EditOutlined/>}>编辑</Button>
                        <Button danger onClick={
                            ()=>{
                                handleDelete(record)
                            }
                        } icon={<DeleteOutlined/>}>删除</Button>
                    </Fragment>
                )
            },
            key:'action',
        },
    ]
    //发起请求获取列表数据
    useEffect(()=>{
        api.getProductlistApi()
        .then(res=>{
            console.log(res)
            //因为dataSource中必须要定义key，所以使用map进行处理，增加一个key
            let data=res.data.data.map((item:Idata):Idata & {key:string}=>{
                return {
                    key:item._id!,
                    ...item,
                    updator:item.updator ?? '暂无',
                    updateTime:item.updateTime ?? '暂无修改'
                }
            })
            setDataScource(data)
        })
    },[])
    //普通对话框方法

    //确定按钮
    let handleOk=async()=>{
        try{
            let res=await delProduct(delId as string)
            console.log(res)
            if(res.data.state){
                message.success('删除成功')
            }
            //更新列表
            api.getProductlistApi();
            //关闭弹框
            setIsModalOpen(false)
        }catch(e){
            console.log(e)
        }
    }
    //取消按钮
    let handleCancel=()=>{
       setIsModalOpen(false)
       message.warning('已取消删除')
    }
    return(
        <div className="list_container">
            
            <div className="tip">
                <p className="tip_top">操作提示</p>
                <ul>
                    <li>1.该页展示了商城所有的商品信息，可对商品进行修改操作</li>
                    <li>2.商家添加商品后，需要刷新页面才能看到最新商品</li>
                </ul>
            </div>
            {/* 确认对话框 */}
            <Modal title="删除提示" okText='确认删除' cancelText='取消删除' centered open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <p>是否要删除这条数据？</p>
            </Modal>
            {/*中间操作部分 */}
            <div className="operation">
                <div className="button">
                <MyModal></MyModal>
                    <Button type="primary" danger icon={<DeleteOutlined/>} >批量删除</Button>
                </div>
                <div className="search">
                    <Form>
                        <Form.Item label="商品内容">
                            <Input placeholder="商品名称/编号" />
                        </Form.Item>
                        <Form.Item label="添加时间">
                            <DatePicker placeholder="选择日期" />
                        </Form.Item>
                        <Button icon={<SearchOutlined/>} type="primary">查询</Button>
                    </Form>
                </div>
            </div>
            {/* 表格部分 */}
            <div className="table">
                <Table bordered dataSource={dataSource} columns={columns}></Table>
            </div>
        </div>
    )
}
export default ProductList